/*
 * @Author: xueyp
 * @Date: 2020-06-10 19:59:57
 * @Last Modified by: xueyp
 * @Last Modified time: 2020-06-10 21:07:15
 * @description: 顶部的时钟
 */
<template>
  <div class="timer-wrapper">
    <div class="regards">{{ regards || timeState.name }}</div>
    <div class="time">现在是{{ currentTime }}</div>
  </div>
</template>

<script>
import { getServerTime } from "@/tools/index";
import { mapState } from "vuex";
export default {
  data() {
    return {
      timer: null,
      currentTime: ""
    }
  },
  props: {
    regards: String
  },
  watch: {
    '$store.state.serverTime' (val) {
      if (this.timer) {
        clearInterval(this.timer)
      }
      let time = Date.parse(val)
      this.timer = setInterval(() => {
        time += 1000
        this.currentTime = getServerTime(time)
      }, 1000);
    }
  },
  created() {
    
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  computed: {
    ...mapState({
      timeState: "timeState"
    })
  }
};
</script>

<style scoped lang="less">
.timer-wrapper {
  position: absolute;
  top: 2.2rem;
  //   top: 2.51rem;
  left: 0.73rem;
  .regards {
    font-size: 0.58rem;
    font-family: Yuanti SC;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
  }
  .time {
    margin-top: 0.2rem;
    font-size: 0.3rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }
}
</style>
